<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    class="small-common-dialog-size"
    @close="closeDialog">
    <Title :title="title" />
    <div class="main">
      <el-input v-if="isEditNumber" v-model="content" placeholder="请输入" maxlength="50" @input="numInputChange($event)"/>
      <el-input
        v-else
        v-model="content"
        size="small"
        placeholder="请输入"
        maxlength="15"
        oninput="if(value>999999999)value=999999999"
        @input="numInputChange($event)"/>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="toSubmit()">保存</el-button>
      <el-button type="info" size="small" class="cancel-btn-style" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
export default {
  components: { Title },
  data() {
    return {
      dialogFormVisible: false,
      content: '',
      title: '',
      isEditNumber: true
    };
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false;
      this.content = '';
    },
    openDialog(data = {}) {
      this.dialogFormVisible = true;
      this.content = data.content;
      this.title = data.title;
      this.isEditNumber = data.isEditNumber;
    },
    // 限制还款金额
    numInputChange(text) {
      let str = '';
      if (this.isEditNumber) {
        str = text.replace(/[^\d.]/g, ''); // 只允许数字
      } else {
        str = text.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
        str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
        str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
        str = str.replace(/[^(\d | \-).]/g, ''); // 只允许数字
        str = str.replace(/^-[^\d]+/g, '-'); // 连续多个0 replace为1个0
        str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
        str = str.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      }
      this.content = str;
    },
    toSubmit() {
      if (!this.content) {
        this.$message.warning('请确认内容是否填写');
        return;
      }
      this.$emit('handelOk', { isEditNumber: this.isEditNumber, content: this.content });
      this.closeDialog();
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 16px;
  margin-bottom: 32px;
}
.btn {
  display: flex;
  justify-content: center;
}
</style>
